<template>
	<view class="warp" style="max-width: 540px;margin: 0 auto;">
		<view class="imgbox">
			<image src="/static/zhongkekehou/1.png" mode="widthFix"></image>
			<view>
				<view class="scollView">
					<image src="../../../static/zhongkekehou/phone.png" mode="widthFix"></image>
					<text class="callphone">客服咨询热线:4001768987</text>
				</view>

			</view>

		</view>
		<view class="title">
			<image src="../../../static/zhongkekehou/left.png" mode="widthFix"></image>
			<text class="name">三大福利产品</text>
			<image src="../../../static/zhongkekehou/right.png" mode="widthFix"></image>
		</view>

		<view class="subtitle">
			洁净·品质·安全
		</view>

		<view class="list" v-for="(item,index) in listArr" :key="index">
			<image class="left" :src=item.image mode="widthFix"></image>
			<view class="info">
				<text class="time">{{item.name}}</text>
				<text class="service">{{item.text}}</text>

			</view>
			<image @click="goStoreInfo(index)" class="bottomImg" src="../../../static/zhongkekehou/按钮@2x.png"
				mode="widthFix"></image>

		</view>

		<view class="introduceBox">
			<text>权益说明：<br/></text>
			<text>1.妙妈单项权益仅限目标用户参与；<br/>
				2.目标用户每次下单前均可领取一次优惠券；<br/>
				3.此优惠券领取后永久有效，但不可叠加使用；<br/>
				4.到家服务在未派单前均可取消修改地址，如已派单可与客服沟通修改地址；<br/>
				5.如用户要求加时服务，可直接与服务商家沟通，超出部分不享受平台优惠券服务；<br/>
				6.如有问题可咨询客服：4001768987.</text>

		</view>
		<view class="reminderBtn" v-if="isLqShow">
			<image class="amount" src="/static/common/amount.png" mode="widthFix"></image>
			<image v-if="one" class="btn" src="/static/common/now.png" mode="widthFix" @click="lqBtnFun"></image>
			<!-- <text v-if="one" class="text">可与折扣叠加使用</text> -->
			<image v-if="!one" class="btn" src="/static/common/had.png" mode="widthFix"></image>
			<text v-if="!one" class="text">下单自动减免15</text>
			<view class="close" @click="closeFun">
				<text class="closeBtn">
					X
				</text>
			</view>


		</view>
		<view class="vipBtn" @click="vipBtnFun">
			<image class="image" src="/static/common/quan.png" mode="widthFix"></image>

		</view>

	</view>
</template>

<script setup>
	import {
		appInfo
	} from '@/config/config.js'
	const {
		proxy
	} = getCurrentInstance()
	const isLqShow = ref(true)
	const one = ref(true)
	const listArr = ref([{
			name: '日常保洁3小时',
			image: '../../../static/zhongkekehou/日常保洁@2x.png',
			text: '定期清理 清新由内而外服务标准看得见'
		},
		{
			name: '滚筒洗衣机清洁',
			image: '../../../static/zhongkekehou/滚筒@2x.png',
			text: '高温蒸汽机消毒 延长使用寿命衣物靓丽如新 远离细菌'
		},
		{
			name: '空调挂机清洁',
			image: '../../../static/zhongkekehou/空调@2x.png',
			text: '高温除尘除菌 让呼吸更清新让生活更健康'
		}
	])

	onShow(() => {	
		
		proxy.sjuRequest.request("/api/weixin/queryMember/" + proxy.sjuLogin.getValue("miaoOpenid")+'/'+appInfo.appId, 'post').then(
			res => {
				console.log(res)
				if (res.data) {
					let level = res.data.memberLevel
					if(level==''){
						if (proxy.sjuLogin.getValue("feiYhj")) {
							one.value = false
							isLqShow.value = false
						} else {
							isLqShow.value = true
							one.value = true
						}
					}else{
						proxy.sjuAlert.showConfirm('您已是妙妈到家会员，无法领取优惠券', () => {	//点击确认后执行方法`
							proxy.sjuNav.switchTab('/tab/store')
						}, () => {
							//点击取消后执行方法
						proxy.sjuNav.switchTab('/tab/store')
						}, '提示')
					}
		
				}
		
			})
		

	})

	const lqBtnFun = () => {
		// one.value=false		

		if (proxy.sjuLogin.getValue("miaoMobile")) {
			one.value = false
			proxy.sjuLogin.saveValue("feiYhj", proxy.sjuLogin.getValue("miaoMobile"));
		} else {
			proxy.sjuNav.navigateTo('/login/login')
		}
	}
	const vipBtnFun = () => {
		isLqShow.value = true
	}
	const closeFun = () => {
		isLqShow.value = false
	}
	const goStoreInfo = (index) => {
		console.log(index)
		//30
		if (index == 0) {
			proxy.sjuNav.navigateTo('/my/storeInfo?id=18&count=1')
		} else if (index == 0) {
			proxy.sjuNav.navigateTo('/my/storeInfo?id=30&count=1')
		} else {
			proxy.sjuNav.navigateTo('/my/storeInfo?id=26&count=1')
		}

	}
</script>

<style lang="scss" scoped>
	.warp {
		width: 100%;
		height: auto;
		background: #457cf0 !important;
		box-sizing: border-box;
		padding-bottom: 50px;

	}

	.content {
		.number {
			width: 10000px;
			height: 45px;
			overflow: hidden;

			span {
				display: inline-block;
				color: #fff;
				background-color: rgba(0, 0, 0, 0.5);
				padding: 5px 10px;
				box-sizing: border-box;
				border-radius: 3px;
				margin: 5px
			}
		}

	}


	.imgbox {
		width: 100%;
		height: auto;
		position: relative;

	}

	.imgbox {
		image {
			width: 100%;
		}

	}

	.scollView {
		width: 80%;
		margin: 0 10%;
		background: #1b39e7;
		border-radius: 20px;
		height: 30px;
		line-height: 30px;
		display: flex;
		justify-content: center;
		/* 水平居中 */
		align-items: center;
		/* 如果需要垂直居中，也可以加上这个属性 */
	}

	.scollView {
		image {
			width: 15px;
		}
	}

	.callphone {
		display: block;
		text-align: center;
		color: #fff;
		font-size: 12px;
		padding-left: 4px;

	}

	.title {
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 20px 0 10px 0;
	}

	.title {
		image {
			width: 30px;
		}

		.name {
			color: #fff;
			font-weight: bold;
			font-size: 16px;
			padding: 0 10px
		}
	}



	.subtitle {
		text-align: center;
		font-size: 14px;
		color: #fff;
	}

	.list {
		width: 90%;
		margin: 5%;
		height: 150px;
		background: #fff;
		border-radius: 20px;
		box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.5);
		padding: 10px 20px;
		box-sizing: border-box;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		margin-bottom: 35px;
	}

	.list {
		.left {
			width: 240rpx
		}

		.info {
			margin-left: 10px;
			display: flex;
			flex-direction: column;
			justify-content: center;
			/* align-items: center; */
		}

		.bottomImg {
			width: 50%;
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			bottom: -13%
		}
	}



	.time {
		font-size: 16px;
		font-weight: bold;
		color: #3330a7;
		line-height: 2;
	}

	.service {
		color: #5077d4;
	}

	.reminderBtn {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		flex-direction: column;

		.amount {
			width: 60%;
			margin-left: 22%;
			margin-top: 40%
		}

		.btn {
			margin-top: 2%;
			width: 40%;
			margin-left: 30%
		}

		.text {
			text-align: center;
			color: #fff;
			line-height: 30px;

		}

		.close {
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.closeBtn {
			display: flex;
			color: #ccc;
			width: 30px;
			height: 30px;
			border-radius: 100%;
			align-items: center;
			justify-content: center;
			background: rgba(0, 0, 0, 0.1);
			// text-align: center;
		}
	}

	.vipBtn {
		width: 50px;
		height: 50px;
		line-height: 50px;
		text-align: center;
		// background: #F5A862;
		color: #fff;
		border-radius: 100%;
		position: fixed;
		right: 10px;
		top: 50%;
		transform: translateY(-50%);

		image {
			width: 100%
		}
	}
	.introduceBox{
		padding:5%;
		box-sizing: border-box;
		color: #fff;
		text{
			font-size: 14px;
			line-height: 1.8;
			
		}
	}
</style>